<template>
    <div id="a1">
        <div class="s1">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">微软云重点目标总数量
                        </div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ goalNum }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        <div class="s2">
            <dv-border-box-8>
                <div class="dTit">
                    <div class="tA">微软云重点行业资产统计排名
                    </div>
                </div>
                <left-detail-chart class="lD"></left-detail-chart>
            </dv-border-box-8>
        </div>


        <div class="s1">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">微软云重点目标资产总数量

                        </div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ assets }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        
        <div class="s1">
            <dv-border-box-13>
                <div class="contentOne">
                    <div class="left">
                        <div class="text">微软云重点目标域名总数量</div>
                    </div>
                    <div class="right">
                        <div class="textR">
                            {{ goalNum }}
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
    </div>
</template>

<script>
import { KeyObjectList, assets } from "@/api/leftDetailList-society"
import leftDetailChart from './leftDetailChart/leftDetailChart.vue'

export default {
    components: { leftDetailChart },
    data() {
        return {
            goalNum: '',
            assets: ''
        }
    },
    mounted() {
        this.initPageOne();
        this.initPageTwo();
    },
    methods: {
        initPageOne() {
            let params = {
                pageSize: 10,
                pageNum: 1
            };
            KeyObjectList(params)
                .then((res) => {
                    if (res.code === 200) {
                        this.goalNum = res.data.total
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        initPageTwo() {
            assets()
                .then((res) => {
                    if (res.code === 200) {
                        this.assets = res.data[0].assets
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
    },
}
</script>

<style lang="scss" scoped>
#a1 {
    width: 450px;
    height: 95%;
    padding-top: 20px;
    padding-left: 10px;
    z-index: 1;

    .s1 {
        height: 120px;
        margin-bottom: 20px;

        .contentOne {
            width: 100%;
            height: 100%;
            display: flex;
            // color: deepskyblue;
            color: white;

            .left {
                width: 50%;
                height: 100%;
                font-size: 18px;
                font-weight: 900;
                display: flex;
                align-items: center;

                .text {
                    white-space: nowrap;
                    margin-left: 40px;
                }
            }

            .right {
                width: 50%;
                height: 100%;
                font-size: 28px;
                font-weight: 700;
                position: relative;

                .textR {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    white-space: nowrap;
                }
            }
        }
    }

    .s2 {
        width: 100%;
        height: 450px;
        margin-bottom: 20px;

        .dTit {
            width: 100%;
            font-size: 20px;
            color: white;
            padding-top: 20px;
            padding-left: 35px;
        }

        .lD {
            width: 100%;
            height: 100%;
        }
    }
}
</style>